<template>
	<view class="box" id="app">
		<view class="b-top">
			<input v-model="selectData" maxlength="11" class="b-t-select" placeholder="请输入手机号码" />
			<span class="b-t-select-text" @click="cllickQuery">查询</span>
		</view>
		<view v-if="show == true">

			<view v-for="(item,index) in dataList" :key="index" style="margin-bottom:3vh">
				<!-- 报告单 -->
				<view class="b-cent">
					<view class="b-cent-title" :style="index != 0 ? 'color:#265FF4':'color:#FFFFFF'">
						项目：{{item.experimentCodeName}}
					</view>
					<view class="b-cent-c">
						<view class="top-title">
							——<span style="margin: 0 4px;">{{item.reportHospitalName}}</span>——
						</view>
						<!-- 标题 -->
						<view class="b-c-c-title">
							{{item.title}}
						</view>
						<!-- 列表1 -->
						<view class="b-c-c-list">
							<span v-if="item.bloodNum">
								采血卡号：{{item.bloodNum}}
							</span>
							<span v-else>
								采血条码：{{item.barCode}}
							</span>
							<span>
								出生医院：{{item.hospitalName}}
							</span>
							<span>
								筛查编号：{{item.expNum}}
							</span>
						</view>
						<!-- 列表2 -->
						<view class="b-c-c-list list2">
							<span>
								母亲姓名：{{item.monName}}
							</span>
							<span>
								性别：{{item.babySex}}
							</span>
							<span>
								出生日期：{{item.birthTime.substr(0, 10)}}
							</span>
							<span>
								手机：{{item.phone}}
							</span>
							<span>
								报告日期：{{item.reportDate.substr(0,10)}}
							</span>
							<span>
								实验结论：{{item.experimentResult}}
							</span>
						</view>
						<!-- 表格 -->
						<table class="table">
							<thead>
								<tr class="table-title">
									<th style="border-top-left-radius: 10px;">筛查项目</th>
									<th>检测值</th>
									<th>正常参考值</th>
									<th style="border-top-right-radius: 10px;">筛查结果</th>
								</tr>
							</thead>
							<tbody class="table-center-box">
								<tr class="table-content" v-for="(items,indexs) in item.experimentValue" :key="indexs">
									<td>{{items.indicatorCodeName}}</td>
									<td>{{items.experimentValue}}</td>
									<td>{{items.referenceValue}}</td>
									<td>{{items.hint}}</td>
								</tr>
							</tbody>
						</table>
						<view class="table-foot">
							本次检测结果只对该筛查编号标本负责
						</view>
						<!-- 签名 -->
						<view class="b-c-c-list" style="margin-top:1.4vh">
							<span>
								检测者(签)：{{item.experimentMan}}
							</span>
							<span>
								审核者(签)：{{item.checkMan}}
							</span>
							<span class="address">
								联系地址：{{item.reportHospitalAddress}}
							</span>
							<span class="address">
								联系电话：{{item.reportHospitalPhone}}
							</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="none">
			<image src="../../static/error.png" style="width: 35vw;height: 18vh;"></image>
			<view style="color:#265FF4;margin-top: 3vh;">
				暂无数据~
			</view>
		</view>

	</view>
</template>

<script>
	import homeApi from '@/config/api/home.js'

	export default {
		data() {
			return {
				selectData: '',
				show: true,
				loading: true,
				dataList: [],
			}
		},
		onShow() {
			this.selectData = uni.getStorageSync('userInfo').phone || ''
		},
		onLoad() {

		},
		// 监听导航按钮(如果是左边就返回上一页)
		onNavigationBarButtonTap(e) {
			if (e.float == "left") {
				window.history.back(-1);
			}
		},
		methods: {
			// 点击查询
			cllickQuery() {
				if (this.selectData == '') {
					uni.showToast({
						title: '请输入手机号码查询！',
						type: 'error',
						icon: 'none'
					})
					return
				} else if (!(/^1[3456789]\d{9}$/.test(this.selectData))) {
					uni.showToast({
						title: '手机号码有误，请重填！',
						type: 'error',
						icon: 'none'
					})
					return;
				}
				this.dataList = []
				let that = this;
				homeApi.getExperIment({
					phone: this.selectData
				}).then(res => {
					if (res.length > 0) {
						that.dataList = res
						that.show = true
					} else {
						that.show = false
					}
				})
			},
			// 获取url参数
			getUrlKey(name) { //获取url 参数
				// alert("location.href code = " + "=====" + location.href);
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[
					1].replace(/\+/g, '%20')) || null;
			}
		},
		watch: {
			selectData() {
				if (this.selectData == '') {
					this.show = true
					this.dataList = []
				}
			}
		}
	}
</script>

<style>
	page,
	html,
	body {
		height: 100%;
		width: 100%;
		overflow: hidden;
		margin: 0;
		padding: 0;
		background: #F4F7FF;
	}

	.box {
		width: 100%;
		height: 100%;
		position: relative;
		background: url('') no-repeat;
		background-size: 100% 40%;
		top: -1vh;
		overflow-y: auto;
	}

	.b-top {
		padding-top: 3.5vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.b-t-select {
		margin-left: 1.335vw;
		font-family: PingFang SC;
		padding-left: 2.7vw;
		font-size: 2.8vw;
		width: 77.3vw;
		height: 5vh;
		border-radius: 10px;
		border: 0;
		background: #fff
	}

	.b-t-select-text {
		font-size: 4.5vw;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 40px;
		margin-left: 2.2735vw;
	}

	.b-cent {}

	.top-title {
		color: #666;
		font-size: 3vw;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.b-cent-title {
		width: 100%;
		text-align: center;
		font-size: 3.5vw;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 40px;
		margin-top: 1.8vh;
		margin-bottom: 2vh;
	}

	.b-cent-c {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background: #FFFFFF;
		box-shadow: 0px 7px 8px 0px rgba(215, 225, 249, 0.2);
		border-radius: 20px;
		margin: 0 2.6vw;
		padding: 2.3vh 3.6vw;
	}

	.b-c-c-title {
		font-size: 3.98vw;
		font-family: PingFang SC;
		font-weight: bold;
		color: #4578FF;
		line-height: 40px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.b-c-c-list {
		margin-top: 1.6vh;
		width: 100%;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		line-height: 2;
	}

	.b-c-c-list span {
		width: 50%;
		font-size: 3vw;
	}

	.list2 {
		margin-top: 2.5vh;
	}

	.address {
		width: 100% !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.table {
		width: 100%;
		font-size: 3vw;
		text-align: center;
		border-radius: 10px;
		font-family: PingFang SC;
		font-weight: 500;
		border-collapse: collapse;
		color: #473FB4;
		margin-top: 1.2vh;
	}

	.table-title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 2.6vw;
		height: 4vh;
		background: linear-gradient(0deg, #89ACFF 0%, #487AFF 100%);
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: bold;
	}

	.table-title th {
		flex: 1;
		border-right: 1px #A7BDF3 solid !important;
	}

	.table-title th:last-child {
		border-right: 0px !important;
	}

	.table-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.table-content td {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 1px #A7BDF3 solid;
		font-size: 2.5vw;
		height: 3.6vh;
	}

	.table-title td:last-child {
		border-right: 0px !important;
	}

	.table-foot {
		height: 4vh;
		font-size: 2.6vw;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(0deg, #89ACFF 0%, #487AFF 100%);
		opacity: 0.7;
		border-radius: 0px 0px 10px 10px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.table-center-box tr:nth-child(even) {
		background: #A7BDF3;
		opacity: 0.7;
	}

	.none {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 50%;
	}
</style>
